<template>
    <div>
        <div class="button-container">
            <button class="copy-btn" @click="copy"><img src="../../../public/fuzhi.png" alt=""> <span class="text">复制</span> </button>
            <button class="paste-btn" @click="paste"><img src="../../../public/niantie.png" alt=""> <span class="text">粘贴</span>  </button>
        </div>
        <div class="cookie-list" v-if="cookiesList?.length">
            <div v-for="item in cookiesList" :key="item.name" class="cookie-item">
                <div class="cookie-name">
                    {{ item.name }}
                </div>
                <div class="cookie-value">
                    {{ item.value }}
                </div>
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { ref } from 'vue'
let cookiesList = ref([]) as any
cookiesList.value = JSON.parse(localStorage.getItem('cookiesList') as any);
const copy = async () => {
    getCookies()
}
const getCookies = async () => {
    try {
        // 首先获取当前活动标签页的 URL
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        const currentUrl:string = tab.url as string;
        // 确保有有效的 URL
        if (!currentUrl) {
            console.error('无法获取当前标签页 URL');
            return;
        }

        // 使用 chrome.cookies.getAll 并传入包含 url 的 details 对象
        const cookies = await chrome.cookies.getAll({
            url: currentUrl,
        });
        cookiesList.value = cookies.map((item) => {
            return { name: item.name, value: item.value }
        })
        localStorage.setItem('cookiesList', JSON.stringify(cookiesList.value));
        chrome.notifications.create({
            type: 'basic',
            title: '提示信息',
            message: '复制cookie成功',
            priority: 1,
            iconUrl: "../../../public/logo.png"
        });
        // 后续处理 cookies...
    } catch (error) {
        console.error('获取 cookies 失败:', error);
    }
}
const setCookie = async (key:any, Value:any) => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentUrl = tab.url;
    chrome.cookies.set(
        {
            url: currentUrl as any, // 必须：与此 Cookie 关联的 URL
            name: key,              // 必须：Cookie 的名称
            value: Value,           // 必须：Cookie 的值 
            path: "/",                      // 可选：路径，默认为 "/"
            secure: true,                   // 可选：是否仅通过 HTTPS 发送，默认为 false
            httpOnly: false,                // 可选：是否仅限 HTTP 访问（JS 不可读），默认为 false
            expirationDate: Math.floor(Date.now() / 1000) + (24 * 60 * 60),    // 可选：过期时间（Unix 时间戳）。如果未设置，则为会话 Cookie。
            // sameSite: "no_restriction"   // 可选：SameSite 策略 ("no_restriction", "lax", "strict")
        },
        function (cookie) {
            // 这是一个可选的回调函数
            //public\logo.png
            if (cookie) {
                chrome.notifications.create({
                    type: 'basic',
                    title: '提示信息',
                    message: 'Cookie 设置成功',
                    priority: 1,
                    iconUrl: "../../../public/logo.png"
                });
            } else {
                console.error("设置 Cookie 失败！");
            }
        }
    );
}
const paste = () => {
    cookiesList.value.forEach((item:any) => {
        setCookie(item.name, item.value)
    })
}
</script>

<style scoped>
.text{
    width: 40px;
}
img{
    width: 18px;
    height: 18px;
}
.cookie-list{
    max-height: 100px;
    overflow-y: scroll;
}
.button-container {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #f5f5f5;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.copy-btn,
.paste-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn {
    background: #4a90e2;
    color: #ffffff;
}

.paste-btn {
    background: #34c759;
    color: #ffffff;
}

.copy-btn:hover {
    background: #357abd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.paste-btn:hover {
    background: #249a43;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.copy-btn:active,
.paste-btn:active {
    transform: translateY(0);
    opacity: 0.8;
}

.copy-btn::after,
.paste-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.copy-btn:hover::after,
.paste-btn:hover::after {
    transform: scaleX(1);
}
.cookie-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 5px;
}

.cookie-name {
  font-weight: bold;
  color: #333;
  flex: 1;
  max-width: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cookie-value {
  flex: 3;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}


</style>